<template>
    <div class="souResult flexv">
        <!-- 头部 -->
        <!-- 轮播图 -->
		<pubHead title="搜索结果"></pubHead>
       
		<!-- 热卖商品 -->
		<van-list v-model="loading" :finished-text="finishedText" :finished="finished" @load="getHots">
			<div class="goods_lists flex-wrap" v-if="hots.length!=0">
				<div class="goods-list flexv" @click="toDetail(item)" v-for="(item,index) in hots" :key="index">
					<div class="goods-img flex">
						<img v-lazy="item.image" :src="item.image" class="goods_img" alt="">
					</div>
					<div class="goods-info flexv jus-b flex1">
						<p class="twoline title">{{item.goods_name}}</p>
						<div class="goods-fix jus-b ali-c">
							<span class="ali-b price">￥{{parseFloat(item.goods_price)}}<span>起</span></span>
							<span class="sales tc" v-if="item.return_price">分享赚￥{{parseFloat(item.return_price)}}</span>
						</div>
					</div>
				</div>
			</div>
			<!--为空提示-->
			<empty :src="emptyIco" tip="没有符合的商品哦~" icoWidth="4.16rem" icoHeight="3.1rem" v-else></empty>
		</van-list>
    </div>
</template>
<script>
	import Vue from 'vue';
	import {
		Toast,
		List,
		Swipe,
		SwipeItem,
	} from 'vant';
	import {
		SearchList
	} from '@/request/api';
	import Empty from '@/components/theEmptyTemplate';
	import pubHead from '@/components/head';
	Vue.use(Toast,Swipe, SwipeItem, List)
export default {
    data(){
        return{
			page: 0,
			pagesize: 10,
			hots: [], // 热卖
			banners:[],
			finishedText: '嘉瑞科技提供技术支持',
			finished: false,
			loading: false,
			keyword:'',
			emptyIco: require('@/assets/cash_withdrawal.png'),// 为空图片
        }
    },
    components: {
		 pubHead,
		"van-list": List,
		"van-swipe": Swipe,
		"van-swipe-item": SwipeItem,
		'empty': Empty,
    },
    created(){
		console.log(this.$route.params.id)
		this.keyword = this.$route.params.id
    },
    methods: {
		// 获取当季热卖商品
		getHots() {
			this.$loading()
			SearchList({
				token: localStorage.getItem('token'),
				page: ++this.page,
				pagesize: this.pagesize,
				keyword:this.keyword
			}).then(res => {
				Toast.clear();
				if (res.code == 1) {
					this.finished = Number(res.data.list) >= Number(this.pagesize) ? false : true;
					if (res.data.list.length > 0) {
						this.hots = [...this.hots, ...res.data.list];
					}
					this.banners = res.data.banner
				} else {
					if (res.msg == '请登录后操作') {
						this.$tip('您的登录已失效,即将重新登录!');
						setTimeout(() => {
							localStorage.clear();
							// sessionStorage.clear();
							window.location.href = 'http://mbgo.0791jr.com';
						}, 1200)
					}
				}
			})
		},
		// 去商品详情
		toDetail(item) {
			if (item.item_type == 0) {
				this.$router.push('/goodsDetail?id=' + item.goods_id)
			} else {
				this.$router.push('/detail?id=' + item.goods_id + '&type=' + item.item_type)
			}
		},
    },
	
	
}
</script>
<style lang="less" scoped>
.souResult{
    min-height: 100vh;
    background: #f5f5f5;
	// 轮播图
	.swiper_box {
		height: 3rem;
		padding-top: 0.1rem;
		background-color: #fff;
	
		.swiper {
			width: calc(100% - 0.56rem);
			height: 100%;
			margin: 0 auto;
			border-radius: 0.1rem;
			background-color: #fff;
	
			img {
				width: 100%;
				height: 100%;
			}
		}
	}
	// 热卖商品
	.goods_lists {
		margin-top: 0.2rem;
		padding: 0 0.28rem;
	
		.goods-list {
			width: calc((100% - 0.2rem) / 2);
			margin: 0 0.2rem 0.2rem 0;
			padding: 0.2rem 0.2rem 0.3rem;
			border-radius: 0.1rem;
			background-color: #fff;
	
			.goods-img {
				width: 2.9rem;
				height: 2.9rem;
				margin: 0 auto;
				border-radius: 0.1rem;
				border: 0.01rem solid #f5f5f5;
				overflow: hidden;
	
				.goods_img {
					margin: auto;
				}
			}
	
			.goods-info {
				margin-top: 0.2rem;
				font-size: 0.28rem;
				line-height: 120%;
				color: #333;
	
				.title {
					line-height: 150%;
				}
	
				.goods-fix {
					margin-top: 0.2rem;
					font-size: 0.34rem;
					color: #EE1C1A;
	
					.sales {
						width: 1.3rem;
						height: 0.4rem;
						font-size: 0.2rem;
						line-height: 0.4rem;
						color: #EE1C1A;
						border-radius: 0.1rem;
						background-color: #FFF6F6;
					}
	
					.price {
						span {
							font-size: 0.22rem;
							line-height: 120%;
							color: #666;
						}
					}
	
					img {
						width: 0.46rem;
						height: 0.46rem;
						margin: auto 0;
						border-radius: 100%;
					}
				}
			}
		}
	
		.goods-list:nth-child(2n) {
			margin-right: 0;
		}
	}
}
</style>